<template>
	<view class="order">
		<view class="topBx">
			<image :src="imaurl+'b1.png'" style="width: 100%;height: 524rpx;" mode=""></image>
			<view class="contentBox">
				<view class="" style="height: 238rpx;"></view>
				<view class="tabsBox">
					<view class="tabsItem" :class="tabsCurrindex==0?'tabsItemed':''" @click="handleTabs(0)">
						服务订单
					</view>
					<view class="tabsItem" :class="tabsCurrindex==1?'tabsItemed':''" @click="handleTabs(1)">
						赛鸽寄送信息
					</view>
				</view>
				<!-- 订单状态 -->
				<!-- 服务订单 -->
				<view v-if="tabsCurrindex==0" class="statusBox">
					<view class="statuItem" v-for="(item,index) in serveList"
						:class="serveCurrindex==index?'statuItemed':''" @click="handleServeIndex(index)">
						{{item}}
					</view>

				</view>
				<!-- 赛鸽寄送订单 -->
				<view v-if="tabsCurrindex==1" class="statusBox">
					<view class="statuItem" style="width: 114rpx;" v-for="(item,index) in JsList"
						:class="JSCurrindex==index?'statuItemed':''" @click="handleJsIndex(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>

		<view v-if="tabsCurrindex==0" class="dataList">
			<view v-if="serveOrderList.length>0" class="">

				<view class="dataItem" v-for="(item,index) in serveOrderList" :key="index"
					@click="handleServeorderDetail(item.id)">
					<view class="topContent">
						<view class="ordernum">
							订单编号:{{item.order_sn}}
						</view>
						<view v-if="item.status==1" class="statusText">
							未支付
						</view>
						<view v-if="item.status==2" class="statusText">
							待寄送
						</view>
						<view v-if="item.status==3" class="statusText">
							待反馈
						</view>
						<view v-if="item.status==4" class="statusText">
							已完成
						</view>
					</view>

					<view class="serveitem">
						<image :src="item.logo" style="width: 144rpx;height: 144rpx;border-radius: 10rpx;" mode="">
						</image>
						<view class="servemessage">
							<view class="name">
								{{item.sname}}
							</view>
							<view class="desc">
								{{item.sinfo}}
							</view>
						</view>
						<view class="price">
							￥{{item.order_price}}
						</view>
					</view>

					<view v-if="item.status==1" class="btns">
						立即支付
					</view>
					<view v-if="item.status==2" class="btns">
						立即寄送
					</view>
				</view>
			</view>

			<view v-else class="">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无订单">
				</u-empty>
			</view>

		</view>

		<view v-if="tabsCurrindex==1" class="dataList">

			<view v-if="JSOrderList.length>0" class="">

				<view class="orderItem" v-for="(item,index) in JSOrderList" :key="index"
					@click="handleJsorderdetail(item.id)">
					<view class="topContent">
						<view class="ordernum">
							订单编号:{{item.order_sn}}
						</view>
						<view v-if="item.status==1" class="statusText">
							待上门
						</view>
						<view v-if="item.status==2" class="statusText">
							待发出
						</view>
						<view v-if="item.status==3" class="statusText">
							待接收
						</view>
						<view v-if="item.status==4" class="statusText" style="color: #333333;">
							已完成
						</view>
					</view>

					<view class="contentBox">
						<view class="contentitem">
							<view class="item">
								<view class="lable">
									环号
								</view>
								<view class="value" style="width: 300rpx;">
									{{item.ring}}
								</view>
							</view>
							<view class="item">
								<view class="lable">
									羽色
								</view>
								<view class="value" style="width: 220rpx;">
									{{item.color}}
								</view>
							</view>
						</view>
						<view class="other">
							<view class="lable">
								其他
							</view>
							<view class="value">
								{{item.other}}
							</view>
						</view>

					</view>
				</view>
			</view>

			<view v-else class="">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无订单">
				</u-empty>
			</view>

		</view>


		<view class="" style="height: 100rpx;"></view>

		<tabBar :value4="value4" @change4="change4" :list="tabList"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabbar.vue"
	import {
		tabList
	} from "@/static/dataList.js"
	import {
		sendorderlist,
		servicelist
	} from "@/api/api.js"
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				value4: 1,
				tabList,
				serveList: [
					'全部',
					'待寄送',
					'待反馈',
					'已完成'
				],
				JsList: [
					'全部',
					'待上门',
					'待发出',
					'待接收',
					'已完成'
				],
				tabsCurrindex: 0,
				serveCurrindex: 0,
				JSCurrindex: 0,
				page: 1,
				JSOrderList: [],
				servePage: 1,
				serveOrderList: [],
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
			}
		},
		onLoad() {
			this.handleservicelist()
			this.handlesendorderlist()
		},
		onReachBottom() {
			console.log("tabsCurrindex", this.tabsCurrindex)
			if (this.tabsCurrindex == 0) {
				this.servePage++
				this.handleservicelist()
			} else {
				this.page++
				this.handlesendorderlist()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.tabsCurrindex == 0) {
				setTimeout(() => {
					this.servePage = 1;
					this.serveOrderList = []
					this.handleservicelist();
					uni.stopPullDownRefresh();
				}, 1000)
			} else {
				setTimeout(() => {
					this.page = 1;
					this.JSOrderList = []
					this.handlesendorderlist();
					uni.stopPullDownRefresh();
				}, 1000)
			}
		},
		methods: {
			change4(name) {
				this.value4 = name
				uni.reLaunch({
					url: this.tabList[name].path
				});
			},

			//服务订单列表
			async handleservicelist() {
				let status = 0
				if (this.serveCurrindex == 0) {
					status = 0
				} else {
					status = this.serveCurrindex + 1
				}
				let res = await servicelist({
					status: status,
					page: this.servePage
				})
				res.data.data.forEach((item, index) => {
					this.serveOrderList.push(item)
				})
			},
			//寄送订单列表
			async handlesendorderlist() {
				let res = await sendorderlist({
					status: this.JSCurrindex,
					page: this.page,
				})
				// this.JSOrderList = res.data.data
				res.data.data.forEach((item, index) => {
					this.JSOrderList.push(item)
				})
			},
			handleTabs(index) {
				this.tabsCurrindex = index
			},
			handleServeIndex(index) {
				this.serveCurrindex = index
				this.handleservicelist()
				this.serveOrderList = []
				this.servePage = 1
			},
			handleJsIndex(index) {
				this.JSCurrindex = index
				this.handlesendorderlist()
				this.JSOrderList = []
				this.page = 1
			},
			handleServeorderDetail(id) {
				uni.navigateTo({
					url: `./serveOrderdetail?id=${id}`
				})
			},
			handleJsorderdetail(id) {
				uni.navigateTo({
					url: `./jsOrderdetail?id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.topBx {
		width: 100%;
		height: 462rpx;
		overflow: hidden;
		position: relative;

		.contentBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;

			.tabsBox {
				width: 750rpx;
				height: 104rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				display: flex;
				align-items: center;

				.tabsItem {
					width: 50%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					line-height: 104rpx;
					text-align: center;

				}

				.tabsItemed {
					color: #333333;
					border-bottom: 4rpx solid #00BF52;
				}
			}

			.statusBox {
				width: 750rpx;
				height: 128rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 30rpx;
				box-sizing: border-box;
				justify-content: space-between;

				.statuItem {
					width: 150rpx;
					height: 68rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					line-height: 68rpx;
					text-align: center;
				}

				.statuItemed {
					background: #00BF52;
					color: #ffffff;
				}
			}
		}
	}

	.dataList {
		.topContent {
			display: flex;
			justify-content: space-between;

			.ordernum {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
				text-align: left;
			}

			.statusText {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #E40700;
				line-height: 38rpx;
			}

		}

		.dataItem {
			width: 750rpx;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;


			.serveitem {
				display: flex;
				align-content: center;
				align-items: center;
				width: 690rpx;
				height: 184rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				margin-top: 20rpx;

				.servemessage {
					width: 340rpx;
					margin-left: 20rpx;
					height: 144rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 38rpx;
					}

					.desc {
						width: 370rpx;
						height: 80rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 33rpx;
					}
				}

				.price {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 36rpx;
					color: #E40700;
					line-height: 42rpx;
					// margin-left: 30rpx;
				}
			}

			.btns {
				width: 240rpx;
				height: 68rpx;
				background: #00BF52;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 68rpx;
				text-align: center;
				margin-left: 450rpx;

			}
		}

		.orderItem {
			width: 750rpx;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.contentBox {
				margin-top: 30rpx;

				.contentitem {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						display: flex;
						align-items: center;

						.lable {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 33rpx;
						}

						.value {
							width: 254rpx;
							height: 80rpx;
							background: #F6F6F6;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							padding: 20rpx;
							box-sizing: border-box;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							margin-left: 20rpx;
						}
					}

				}
			}

			.other {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.lable {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
				}

				.value {
					width: 614rpx;
					height: 80rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					margin-left: 20rpx;
				}
			}
		}

	}
</style>